<template>
<div class="recommend">
   <div class="recommend-item" v-for="item in props.recommend.slice(0,4)" :key="item.id">
     <a href="" @click.prevent="goDetail(item.id)">
       <img v-lazy="item.cover_url" alt="">
       <div class="title">{{item.title}}</div>
     </a>
   </div>
</div>
</template>

<script setup lang="ts">
import type {Goods} from "@/types/goods";
import {useRouter} from "vue-router";

const router = useRouter();
interface Props {
  recommend:Goods.Dto[],
}
const props = withDefaults(defineProps<Props>(), {
  recommend:() => [],
})

function goDetail(id?:number){
  id && router.push({
    path:'/detail',
    query:{id},
  })
}
</script>


<style lang="scss">
.recommend{
  display: flex;
  width: 100%;
  align-items: center;
  padding:10px 4px;
  font-size: 12px;
  border-bottom: 8px solid #eee;
  .recommend-item {
    flex: 1;
    img {
      height: 70px;
      width: 70px;
      margin-bottom: 10px;
    }
    .title{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

</style>